import { Fragment } from '@/components/Fragment'; 
import { Button, ButtonGroup, Flex, View } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentClassTable } from '@/components/ComponentClassTable';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

import { ButtonDemo } from './demo';
import { IconButtonExample, ButtonThemeExample } from './examples';

## Demo

<ButtonDemo />

## Usage

Import the Button primitive and styles.

<Example>
  <View>
    <Button>Hello world</Button>
  </View>

<ExampleCode>

```jsx
import { Button } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

<Button>Hello world</Button>;
```

</ExampleCode>
</Example>

### onClick

Use the `onClick` prop to add a click handler to the Button.

<Example>
  <View>
    <Button onClick={() => alert('👋 hello')}>Click me</Button>
  </View>

<ExampleCode>

```jsx
<Button onClick={() => alert('👋 hello')}>Click me</Button>
```

</ExampleCode>
</Example>

### Sizes

Use the `size` prop to change the Button size. Available options are `small`, `large`, and none (default).

<Example>
  <View>
    <Button size="small">Small</Button>
    <Button>Default</Button>
    <Button size="large">Large</Button>
  </View>

<ExampleCode>

```jsx
<Button size="small">Small</Button>
<Button>Default</Button>
<Button size="large">Large</Button>
```

</ExampleCode>
</Example>

### Variations

Use the `variation` prop to change the Button variation. Available options are `primary`, `link`, `menu`, `warning`, `destructive` and none (default).

<Example>
  <View>
    <Button variation="primary">Primary</Button>
    <Button variation="link">Link</Button>
    <Button variation="menu">Menu</Button>
    <Button variation="warning">Warning</Button>
    <Button variation="destructive">Destructive</Button>
    <Button>Default</Button>
  </View>

<ExampleCode>

```jsx
<Button variation="primary">Primary</Button>
<Button variation="link">Link</Button>
<Button variation="menu">Menu</Button>
<Button variation="warning">Warning</Button>
<Button variation="destructive">Destructive</Button>
<Button>Default</Button>
```

</ExampleCode>
</Example>

### Icon buttons

Icons can be added to buttons and will adapt to the surrounding font-size.

<Example>
  <IconButtonExample />
  
<ExampleCode>

```tsx file=./examples/iconButton.tsx

```

</ExampleCode>
</Example>

### Loading state

<Example>
  <View>
    <Button isLoading={true} loadingText="Loading..." variation="primary">
      Hello
    </Button>
  </View>

<ExampleCode>

```jsx
<Button isLoading={true} loadingText="Loading..." variation="primary">
  Hello
</Button>
```

</ExampleCode>
</Example>

### Other states

<Example>
  <Flex direction="column" alignItems="flex-start">
    <Button isDisabled={true}>Disabled</Button>
    <Button isFullWidth={true}>Full width</Button>
  </Flex>

<ExampleCode>

```jsx
<Button isDisabled={true}>Disabled</Button>
<Button isFullWidth={true}>Full width</Button>
```

</ExampleCode>
</Example>

### Accessibility

Setting an `aria-label` attribute for an icon Button:

<Example>
  <Button ariaLabel="To the moon!">🚀</Button>

<ExampleCode>

```jsx
<Button ariaLabel="To the moon!">🚀</Button>
```

</ExampleCode>
</Example>

### ButtonGroup

Use a `ButtonGroup` to group buttons with the same `size` or `variation`.

<Example>
  <Flex direction="column">
    <ButtonGroup size="small">
      <Button>🚀</Button>
      <Button>🚀</Button>
      <Button>🚀</Button>
    </ButtonGroup>
    <ButtonGroup variation="primary">
      <Button>🚀</Button>
      <Button>🚀</Button>
      <Button>🚀</Button>
    </ButtonGroup>
  </Flex>

<ExampleCode>

```jsx
import { Button, ButtonGroup } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

// same size
<ButtonGroup size="small">
  <Button>🚀</Button>
  <Button>🚀</Button>
  <Button>🚀</Button>
</ButtonGroup>;

// same variation
<ButtonGroup variation="primary">
  <Button>🚀</Button>
  <Button>🚀</Button>
  <Button>🚀</Button>
</ButtonGroup>;
```

</ExampleCode>
</Example>

`ButtonGroup` is also a flex container, so any flex props can apply to it for layout purpose. See [Flex](/components/flex).

<Example>
  <Flex direction="column">
    <ButtonGroup justifyContent="center">
      <Button>🚀</Button>
      <Button>🚀</Button>
      <Button>🚀</Button>
    </ButtonGroup>
    <ButtonGroup direction="column">
      <Button>🚀</Button>
      <Button>🚀</Button>
      <Button>🚀</Button>
    </ButtonGroup>
  </Flex>

<ExampleCode>

```jsx
import { Button, ButtonGroup } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

<ButtonGroup justifyContent="center">
  <Button>🚀</Button>
  <Button>🚀</Button>
  <Button>🚀</Button>
</ButtonGroup>

<ButtonGroup direction="column">
  <Button>🚀</Button>
  <Button>🚀</Button>
  <Button>🚀</Button>
</ButtonGroup>;
```

</ExampleCode>
</Example>

<StandardHTMLAttributes component="Button" element="<button>">
  <Example>
    <Button name="named">Named</Button>

    <ExampleCode>

    ```jsx
    <Button name="named">Named</Button>
    ```

    </ExampleCode>

  </Example>
</StandardHTMLAttributes>

## Customization

<ThemeExample component="Button">
  <Example>
    <ButtonThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/ButtonThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Button" />

### CSS

To override styling on all Buttons, you can set the Amplify CSS variables or use the built-in `.amplify-button` class.

<ExampleCode>

```css
/* styles.css */
[data-amplify-theme] {
  --amplify-components-button-primary-background-color: #0057ff;
  --amplify-components-button-primary-hover-background-color: #4d89fc;
}
/* OR */
.amplify-button {
  background-color: #0057ff;
}
.amplify-button:hover {
  background-color: #4d89fc;
}
```

</ExampleCode>

To replace the Button styling, unset it:

<ExampleCode>

```css
.amplify-button {
  all: unset;
  /* Add your styling here*/
}
```

</ExampleCode>

### Local styling

To override styling on a specific Button, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

_Using a class selector:_

<Example>
  <Button className="colorful-button">I'm colorful!</Button>

<ExampleCode>

```css
/* Example: class selector styling override */
.colorful-button {
  background: linear-gradient(90deg, #fdbb2d 0%, #22c1c3 100%);
}
```

</ExampleCode>
<ExampleCode>

```jsx
import './styles.css';

<Button className="colorful-button">I'm colorful!</Button>;
```

</ExampleCode>
</Example>

_Using data attributes:_

<ExampleCode>

```css
/* styles.css */
/* Override only primary variation styles */
.amplify-button[data-variation='primary'] {
  background-color: teal;
  color: white;
}

/* Override loading styles */
.amplify-button[data-loading='true'] {
  opacity: 0.8;
}

/* Override disabled styles */
.amplify-button[disabled='true'] {
  opacity: 0.8;
}
```

</ExampleCode>

<ExampleCode>

```jsx
import './styles.css';

<Button variation="primary">Teal background</Button>
<Button isLoading={true}>Loading...</Button>
<Button isDisabled={true}>Lighter opacity</Button>
```

</ExampleCode>

_Using style props:_

<Example>
  <View>
    <Button style={{ backgroundColor: 'green', color: 'white' }}>Green</Button>
    <Button backgroundColor="purple" color="white">
      {'Purple'}
    </Button>
  </View>

<ExampleCode>

```jsx
<Button style={{ backgroundColor: 'green', color: 'white' }}>Green</Button>;
{
  /* OR */
}
<Button backgroundColor="purple" color="white">
  Purple
</Button>;
```

</ExampleCode>
</Example>